<template>
  <!-- Vue2 组件只能有一个根标签 -->
  <div class="we-read-container">
    <div class="content" :class="{'dark': isDark}" :style="{'font-size': fontSize + 'px'}">
      <p>牵挂，是人与人之间的质朴情感，是心与心之间的盈盈惦念；牵挂，是亲情的真挚流露，是爱情的由衷眷恋；牵挂，是朋友间的祝福问候，是知己间的相惜流连。茫茫人海中，有几个人牵挂着你的悲喜；大千世界里，有几颗心感应着你的气息。生活中总有人牵挂着你，也总会有人让你惦记。被人牵挂，是一种无法言说的感动与欢愉；牵挂别人，是一种油然于心的惦念和情意。牵挂，是人与人之间的真情表达，是一颗心对另一颗心的深深思念，是源自心底的一份切切祝福，是发乎于情的一份拳拳依恋。</p>
      <p>被人牵挂真好，那感觉如此美妙，心如春天盎然诗意；牵挂别人好甜，那体会这般奇妙，情若栀子满满甜蜜。牵挂，就像一抹和煦的阳光，每每忆起，总是心生暖意温润心底；牵挂，就是一种默默守望，倾心倾情，穿越时空轮回四季。牵挂，就是一种脉脉的心结，纵然坎坷沧桑，你依然驻扎在我的心海里；牵挂，就是一种淡淡的情思，即使海角天涯，万水千山，你依旧流淌奔涌在我的血液里。</p>
      <p>走进了人生，便走进了牵挂，拥有了牵挂，便拥有了生活的酸甜苦辣。亲人之间的嘘寒问暖，让我们从不觉得寂寞寒凉孤立无援，那血浓于水的亲情， 彼此牵挂，相拥取暖，它把我们的血脉和生命紧紧相连；爱人之间的体贴思念，让我们心灵抚慰幸福蜜甜，那心心相印相濡以沫的爱情，是动力，是源泉，它陪伴我们走向手牵手的永远；友情之间的相互关爱无私奉献，让我们感受到了人间真情博大胸怀，这惺惺相惜的友谊，是尊重，是仁爱，是人生路上的相依相伴。</p>
    </div>
    <div class="tools">
      <div
        class="mode"
        @click="isDark = !isDark"
        >
        {{ isDark ? '太阳🌞' : '月亮🌛'}}
      </div>

      <div class="font" @click="showSizeBox">
        A
        <ul class="font-list" :style="{'width': (width ? '260' : '50')+ 'px'}">
          <li v-for="d in 7" :key="d"  @click.stop="setSize" :id="d" :class="[d == currentFont ? 'size' : '']"></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      data() {
        return {
            // 是否开启暗黑模式
            isDark: false,
            fontSize: 16,
            width: false,
            currentFont: -1,
        }
      },
      methods: {
        setSize(event) {
            console.log(event.target.id)
            let id = event.target.id;
            this.currentFont = id;
            switch(id) {
              case '1':
                this.fontSize = 18;
              break;
              case '2':
                this.fontSize = 20;
              break;
              case '3':
                this.fontSize = 22;
              break;
              case '4':
                this.fontSize = 24;
              break;
              case '5':
                this.fontSize = 26;
              break;
              case '6':
                this.fontSize = 28;
              break;
              case '7':
                this.fontSize = 30;
              break;
            }
        },
        showSizeBox(e) {
          console.log(e)
          this.width = !this.width;
        }
      }
    }
</script>

// 三个标签顺序无关
<style>







    .we-read-container {
        width: 70%;
        margin: 0 auto;
    }
    .content.dark {
      background: #000;
      color: #ccc;
      transition: .3s;
    }
    .tools {
      position: fixed;
      right: 50px;
      top: 50%;
    }
    .tools > div {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 5px 0 #333;
      line-height: 50px;
      margin-bottom: 30px;
    }

    .font {
      position: relative;
      cursor: pointer;
    }
    .font ul {
      z-index: -1;
      position: absolute;
      top: 0;
      right: 0;
      /* width: 260px; */
      width: 50px;
      height: 50px;
      background: #fff;
      border-radius: 25px;
      display: flex;
      overflow: hidden;
      box-shadow: 0 0 5px 0 #333;
      transition: .6s;
    }
    .font ul:after {
      content: "";
      position: absolute;
      width: 100%;
      height:6px;
      background: #eee;
      left: 0;
      top: 50%;
      margin-top: -3px;
    }
    .font ul li {
      width: 30px;
      height: 100%;
      /* background: red; */
      position: relative;
      z-index: 10;
      cursor: pointer;
    }
    .font ul li.size {
      transform: scale(1.4);
    }
    .font ul li:after {
        content: "";
        width: 10px;
        height: 10px;
        background: #ddd;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        border-radius: 50%;
    }
</style>
